import React from 'react'
import ReactDOM from 'react-dom'


class App extends React.Component {
    //     constructor(){
    //         super()
    // //   有状态组件
    //         // this.state={
    //         //     count:0
    //         // }
    //         this.onIncrement = this.onIncrement.bind(this)
    //     }
    constructor (){
        super()

        // 创建ref
        this.txtRef = React.createRef()
        }

    // 简化语法
    state = {
        count: 0,
        // 受控组件
        txt: '',
        content: '',
        address: 'bj',
        isChecked: false
    }

    // 事件处理程序
    // onIncrement(){
    //     this.setState({
    //         count:this.state.count+1
    //       }) 
    // }

    // 箭头函数的形式来写
    onIncrement = () => {
        this.setState({
            count: this.state.count + 1
        })
    }

    handleForm = e => {
        // 获取当前DOM对象
        const target = e.target
        // 获取类型获取值
        const value = target.type === 'checkbox' ?
            target.checked
            : target.value
        // 获取name
        const name = target.name
        this.setState({
            [name]: value
        })
    }
    acquire = ()=>{
        console.log(this.txtRef.current.value);
    }

    render() {
        return (
            <div>
                <h1>计数器：{this.state.count}</h1>
                {/* <button onClick={()=>{
                  this.setState({
                    count:this.state.count+1
                  })  
                }}>+1</button> */}
                {/* 通过箭头函数，箭头函数执向当前的实例对象 */}
                {/* <button onClick={()=>this.onIncrement() }>+1</button> */}
                {/* 通过bind的方式进行绑定 */}
                <button onClick={this.onIncrement}>+1</button>
                <div>
                    <input type='text' name='txt' value={this.state.txt} onChange={this.handleForm} />
                    <br />

                    <textarea name='content' value={this.state.content} onChange={this.handleForm}></textarea>
                    <br />

                    <select name='address' value={this.state.address} onChange={this.handleForm}>
                        <option value='sh'>上海</option>
                        <option value="bj">北京</option>
                    </select>

                    <br />

                    <input name='isChecked' type="checkbox" checked={this.state.isChecked} onChange={this.handleForm}></input>

                    <br/>
                    {/* 通过ref操作，非受控组件 */}
                    <input type='text' ref={this.txtRef}></input>
                    <button onClick={this.acquire}>点击获取表单</button>
                </div>
            </div>
        )
    }
}

ReactDOM.render(<App />, document.getElementById('root'))